<template>
	<view>
		<view class="block__content" style="font-size: 35rpx;">
			请输入您的需求：
		</view>
		<view class="block__content">
			<u--textarea
				v-model="job.content"
				placeholder="请输入您的需求"
				height="150px"
			></u--textarea>
		</view>
		<view class="types">
			<view class="flex block__content">
				<view class="block__content" style="font-size: 35rpx;">
					预算：
				</view>
				<view @click="showKeyboard">
					<u-input type="digit" color="red" disabled="true" v-model="job.price" placeholder="0.00"></u-input>	
				</view>
			</view>
		</view>
		<view class="block__button">
			<u-button type="primary" size="min" @click="submit">发布</u-button>
		</view>
		
		<u-popup :show="show" mode="bottom">
			<view>
				<view class="u-keyboard">
					<u-keyboard
						:dotDisabled="keyData.dotDisabled"
						show="true"
						@close="close"
						@cancel="close"
						@change="change"
						@confirm="confirm"
						@backspace="backspace"
					>
					<view class="flex">
						<view class="block__content" style="font-size: 35rpx;">
							预算：
						</view>
						<u-icon name="rmb" color="red" size="28"></u-icon>
						<u-input type="digit" color="red" font-size="28" disabled="true"
							v-model="input" placeholder="0.00" @input="checkNum" ></u-input>
					</view>
					</u-keyboard>
				</view> 
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {pushCreateTask} from '@/api/push.js'
	export default {
		data() {
			return {
				show: false,
				job:{
					price:"",
					content:""
				},
				input:"",
				keyData: {
					mode: '',
					dotDisabled: false,
					random: false,
				},
			}
		},
		methods: {
			checkNum(number) {
				//正则表达试
				number = (number.match(/^\d*(\.?\d{0,2})/g)[0]) || '0.00'
				//重新赋值给input
				this.$nextTick(() => {
					this.input = number
				})
			},
			close() {
				this.show = false
			},
			toDecimal(x) {
				var f = parseFloat(x);
				
				if (isNaN(f)) {
					return false;
				}
				var f = Math.round(x * 100) / 100;
				var s = f.toString();
				var rs = s.indexOf(".");
				if (rs < 0) {
					rs = s.length;
					s += ".";
				}
				while (s.length <= rs + 2) {
					s += "0";
				}
				return s;
			},
			confirm(){
				this.show = false;
				if(!this.input){
					this.job.price = '0.00';
				}else{
					this.job.price = this.toDecimal(this.input);
				}
			},
			backspace(){
				this.input = this.input.substring(0, this.input.length - 1);
			},
			change(e) {
				this.input += e
				this.checkNum(this.input);
			},
			showKeyboard(){
				this.show = true;
			},
			//发布需求
			submit(){
				let that = this;
				uni.showLoading({
					title: '发布中'
				});
				if(this.job.content == "") {
					uni.showToast({
						title: "任务不能为空",
						icon: 'error',
						duration: 2000
					});
					uni.hideLoading();
					return;
				}
				if(this.job.price ==""){
					uni.showToast({
						title: "价格不能为空",
						icon: 'error',
						duration: 2000
					});
					uni.hideLoading();
					return;
				}
				pushCreateTask(this.job).then(res=>{
					if(res.code == '00'){
						uni.showToast({
							title: "发布成功",
							icon: 'success',
							duration: 2000
						});
						uni.hideLoading();
						that.job.content = "";
						that.job.price = "";
					}
				}).catch(res => {
					uni.hideLoading();
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.block__title{
		font-size: 35rpx;
		margin-top: 5px;
	}
	.block__content{
		padding: 10rpx;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}
	.block__button{
		padding: 20rpx;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}
	.types{
		background-color: #fff;
		border-radius: 14rpx;
		padding: 30rpx 16rpx;
		position: relative;
		z-index: 11;
		background-color: #fff;
		position: relative;
	}
</style>
